<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
<Game>
<template v-slot="params">
  <div>
    <ol>
    <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
  </ol>
  <h4>{{ params.x }}</h4>
  <h4>{{ params.y }}</h4>
  </div>
</template>
</Game>
<Game>
<template v-slot="params">
  <div>
    <ul>
    <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
  </ul>
  <h4>{{ params.x }}</h4>
  <h4>{{ params.y }}</h4>
  </div>
</template>
</Game>
<Game>
  <template #default="params">
    <div>
      <h3 v-for="g in params.games" :key="g.id">{{ g.name }}</h3>
    </div>
  </template>
</Game>
    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
  import Game from './Game.vue'
</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
  .content {
    display: flex;
    justify-content: space-evenly;
  }
  img,video {
    width: 100%;
  }
</style>